<template>
	<view class="my-content-info">
		<view class="store-box">

			<view class="store-form">
				<u-cell-group :border="false">
					<u-cell title="是否有收银权限">
						<u-switch slot="right-icon" v-model="addInfo.isCashier" @change="change"></u-switch>
					</u-cell>
					<u-cell title="头像" arrow-direction="right" :isLink="true">
						<u-upload slot="value" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
							:multiple="false" :maxCount="1" width="60" height="60"></u-upload>
					</u-cell>
					<u-cell title="所属门店">

						<picker @change="bindPickerChange" slot="value" :value="index" :range="storelist" range-key="storeName">
							<view class="uni-input">{{storelist[index]?storelist[index].storeName:"请选择门店"}}</view>
						</picker>
					</u-cell>
					<u-cell title="姓名">
						<u--input slot="value" placeholder="请输入姓名" border="none" v-model="addInfo.realName"></u--input>
					</u-cell>
					<u-cell title="职位">
						<u--input slot="value" placeholder="请输入职位" border="none" v-model="addInfo.jobName"></u--input>
					</u-cell>
					<u-cell title="账号">
						<u--input slot="value" placeholder="请输入手机号" border="none" v-model="addInfo.userName"></u--input>
					</u-cell>
					<u-cell title="密码" :border="false">
						<u--input slot="value" placeholder="请输入密码" border="none" type="password" v-model="addInfo.password"></u--input>
					</u-cell>
				</u-cell-group>
			</view>

		</view>
		<view class="btn-box">
			<view class="cancel" @tap="back">取消</view>
			<view class="submit" @tap="submitTo">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreData,
		dealNum,
		setStoreData,
		httpPost,
		httpGet,
	} from "@/utils/http.js";
	import {
		httpUrl
	} from "@/common/config.js"
	const pic1 = require(`@/img/my/my1.png`);
	const avatar = require(`@/img/my/avatar1.jpg`);
	export default {
		data() {
			return {
				src: "",
				checked: false,
				value: "",
				storeInfo: {
					storeId: null,
					merchantAlias: ""
				},
				fileList: [],
				sculptureList: [],
				addInfo: {
					jobName: "",
					password: "",
					realName: "",
					storeId: null,
					subStoreId: null,
					headPhoto: "",
					isCashier: false
				},
				httpUrl: httpUrl,
				storelist: [],
				showTwo: false,
				index: null,
				isModify:false//true修改柜员，false 新增柜员

			};
		},
		onLoad(option) {
			this.userInfo = getStoreData("userInfo");
			console.log(this.httpUrl, this.userInfo)
			if(option.modify){
				this.addInfo=JSON.parse(option.modify);
				this.isModify=true;
			}else{
				this.isModify=false;
			}
			console.log(this.addInfo)
			this.getStoreInfo();
			this.getStoreList();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			getStoreInfo() {
				httpGet(`/api/sellerstore/selfInfo`)
					.then((res) => {
						this.addInfo.storeId = res.data.id;
					})
					.catch((e) => {});
			},
			getStoreList() {
				httpGet(`/api/sellerstoreotherapply/storeList`)
					.then((res) => {
						this.storelist = res.data;
					    console.log(this.storelist)
						if(this.isModify){
							for(let i=0;i<this.storelist.length;i++){
								if(this.storelist[i].id==this.addInfo.subStoreId){
									this.index=i;
								}
							}
						}
					})
					.catch((e) => {});
			},
			change() {},
			
			submitTo() {
				
				if (!this.addInfo.userName) {
					uni.$u.toast("请输入手机号");
					return
				}
				if (!this.addInfo.password) {
					uni.$u.toast("请输入密码");
					return
				}
				if (!this.addInfo.realName) {
					uni.$u.toast("请输入真实姓名");
					return
				}
				if (!this.addInfo.jobName) {
					uni.$u.toast("请输入职务");
					return
				}
				if (!this.addInfo.subStoreId) {
					uni.$u.toast("请选择门店");
					return
				}
				
				console.log(this.addInfo)
				if(this.isModify){
					httpPost(`/api/barcodecashier/update`, this.addInfo)
						.then((res) => {
							console.log(res)
						})
						.catch((e) => {});
				}else{
					httpPost(`/api/barcodecashier/save`, this.addInfo)
						.then((res) => {
							console.log(res)
						})
						.catch((e) => {});
				}
				

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.httpUrl + 'upload/userPhoto',
						filePath: url,
						name: 'file',
						header: {
							"Authorization": uni.getStorageSync("token")
						},

						success: (res) => {
							let imgObj = JSON.parse(res.data);
							console.log(JSON.parse(res.data))
							setTimeout(() => {
								resolve(imgObj.data)
							}, 1000)
						}
					});
				})
			},
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [];
				lists[0] = event.file;

				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.getFacadeImgList(this.fileList);
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.getFacadeImgList(this.fileList);
			},
			getFacadeImgList(list) {
				console.log(list)
				if (list.length == 0) {
					this.sculptureList = [];
				} else {
					this.sculptureList = list.map((item) => {
						let imgUrl = item.url[0].path + '/' + item.url[0].name;
						return imgUrl
					})
				}
				this.addInfo.headPhoto = this.sculptureList.join(",");
			},
			bindPickerChange(data){
				console.log(data)
				let index_new=data.detail.value;
				this.addInfo.storeId=this.storelist[index_new].storeId;
				this.addInfo.subStoreId=this.storelist[index_new].id;
				this.index=index_new;
			}


		},
	};
</script>

<style lang="scss">
	.my-content-info {
		background-color: #F7F7F7;
		height: 100vh;
		padding-top: 20rpx;
	}

	.store-box {
		width: 650rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	/deep/ .u-cell__title-text {
		font-size: 28rpx;
	}

	/deep/ .u-input {
		flex: 2
	}

	.scroll-Y {
		max-height: 90vh;
	}

	.tylist {
		padding: 30rpx;


		.li {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			font-size: 28rpx;
			border-bottom: 2rpx solid #f4f5f7;
		}

		.li-one-box {

			.li-one-title {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				border-bottom: 2rpx solid #f4f5f7;
			}

			.li-two-box {
				margin-left: 20rpx;

				.li-two-title {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					font-size: 28rpx;
					border-bottom: 2rpx solid #f4f5f7;
				}

				.li-three-box {
					margin-left: 30rpx;

					.li-three-title {
						padding-top: 20rpx;
						padding-bottom: 20rpx;
						font-size: 28rpx;
						border-bottom: 2rpx solid #f4f5f7;
					}
				}
			}
		}
	}


	.btn-box {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.cancel {
			width: 45%;
			background-color: #c9c9c9;
			text-align: center;
			color: #fff;
			line-height: 70rpx;
			border-radius: 10rpx;
		}

		.submit {
			width: 45%;
			background: linear-gradient(to right, #3CBAF6, #56D1FC);
			text-align: center;
			color: #fff;
			line-height: 70rpx;
			border-radius: 10rpx;
		}
	}
</style>